<template>
  <basic-container>
    <el-container>
      <el-header style='background-image: url("img/bg/infobg-def.a64c2d3c.png");
        background-size: 100%;
       height: 110px;padding: 10px 5px'>
        <el-row style="color: #fff;">
          <el-col :xs="8" :sm="3" :md="3" :lg="3" :xl="2">
            <el-avatar :fit="fit" :size="80" src="https://t.97you.cn/static/img/userhead-def.0b543b58.png"></el-avatar>
          </el-col>
          <el-col :xs="10" :sm="14" :md="16" :lg="16" :xl="16">
            <div>
              <span style="font-size: 1rem;">您的可用积分：</span>
              <span style="font-size: 1.5rem;">90466</span>
            </div>
            <div style="margin-top: 10px;">
              <a href="#" style="font-size: 0.5em;color:#ffff;">赠送记录</a>
              <span style="margin-left: 10px;"></span>
              <a href="#" style="font-size: 0.5em;color:#ffff; ">兑换记录</a>
            </div>
          </el-col>
          <el-col :xs="6" :sm="6" :md="4" :lg="4" :xl="5" style="text-align: right">
            <el-icon class="el-icon-info"/>
            <span>
              <a href="#" style="margin-left:2px;font-size: 1rem;color:#ffff;">积分说明</a>
            </span>
          </el-col>
        </el-row>
      </el-header>
      <el-main style="margin-top: 20px;">
        <el-card class="box-card">
          <div slot="header" style="color: #FA314D;font-size: 1.2rem;">
            <el-icon class="el-icon-goods"/>
            <span style="margin-left:10px;">兑换豪礼</span>
          </div>
          <div style="text-align: center">
            <el-row>
              <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4">
                <el-card :body-style="{ padding: '0px' }">
                  <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                       class="image">
                  <div style="padding: 14px;font-size: 1.2rem; ">
                    <span>好吃的汉堡</span>
                    <div style=" color:  #FA314D;">
                      19800积分
                    </div>
                  </div>
                </el-card>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4">
                <el-card :body-style="{ padding: '0px' }">
                  <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                       class="image">
                  <div style="padding: 14px;font-size: 1.2rem; ">
                    <span>好吃的汉堡</span>
                    <div style=" color:  #FA314D;">
                      19800积分
                    </div>
                  </div>
                </el-card>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4">
                <el-card :body-style="{ padding: '0px' }">
                  <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                       class="image">
                  <div style="padding: 14px;font-size: 1.2rem;">
                    <span>好吃的汉堡</span>
                    <div style=" color:  #FA314D;">
                      19800积分
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>

          </div>
        </el-card>

        <el-card class="box-card">
          <div slot="header" style="color: #62A8EB;font-size: 1.2rem;">
            <el-icon class="el-icon-trophy"/>
            <span style="margin-left:10px;">畅玩游戏</span>
            <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
          </div>
          <div style="text-align: center">
            <el-row>
              <el-col style="margin: 10px; padding:10px;border: 1px solid #ccc; border-radius: 5px;" :xs="24" :sm="12"
                      :md="12" :lg="8" :xl="4">
                <el-card :body-style="{ padding: '0px' }">
                  <img src="https://fileks.mushao.com/GameFile/MinPic/20200213/8ed4bd6ebd1144d99910d3a6bf8c7eb2.jpg"
                       class="image" height="150" width="244">
                  <div style="padding: 14px;font-size: 1.2rem; ">
                    <el-row>
                      <el-col :span="10" style="font-size: 0.8em; color:#76838F;">
                        <span>桃源之都</span>
                        <div>
                          类型：回合
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <el-button type="primary">立即兑换</el-button>
                      </el-col>
                    </el-row>

                  </div>
                </el-card>
              </el-col>
              <el-col style="margin: 10px; padding:10px;border: 1px solid #ccc; border-radius: 5px;" :xs="24" :sm="12"
                      :md="12" :lg="8" :xl="4">
                <el-card :body-style="{ padding: '0px' }">
                  <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                       class="image" height="150" width="244">
                  <div style="padding: 14px;font-size: 1.2rem; ">
                    <el-row>
                      <el-col :span="10" style="font-size: 0.8em; color:#76838F;">
                        <span>桃源之都</span>
                        <div>
                          类型：回合
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <el-button type="primary">立即兑换</el-button>
                      </el-col>
                    </el-row>

                  </div>
                </el-card>
              </el-col>
              <el-col style="margin: 10px; padding:10px;border: 1px solid #ccc; border-radius: 5px;" :xs="24" :sm="12"
                      :md="12" :lg="8" :xl="4">
                <el-card :body-style="{ padding: '0px' }">
                  <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                       class="image" height="150" width="244">
                  <div style="padding: 14px;font-size: 1.2rem; ">
                    <el-row>
                      <el-col :span="10" style="font-size: 0.8em; color:#76838F;">
                        <span>桃源之都</span>
                        <div>
                          类型：回合
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <el-button type="primary">立即兑换</el-button>
                      </el-col>
                    </el-row>

                  </div>
                </el-card>
              </el-col>
            </el-row>

          </div>
        </el-card>
      </el-main>
    </el-container>
  </basic-container>

</template>

<style>


</style>


<script>

export default {
  name: "mall",
  data() {
    return {}
  },

  computed: {},

  methods: {}
}

</script>

<style>
</style>
